<template>
    <el-select :placeholder="placeholder || $t('game.setting.ratio.name')"
               :size="size" :clearable="clearable" v-model="dataCache.ratio" @change="filterChange">
        <el-option :label="item.label" :value="item.value" :disabled="isDisabled(item.value)"
                   v-for="(item,index) in $t('game.setting.ratio.ratios')" :key="index"></el-option>
    </el-select>
</template>

<script>
export default {
    name: "PageRatioOption",
    model: {
        prop: 'ratio',
        event: 'change'
    },
    props: {
        size: {
            type: String,
            default: null
        },
        ratio: {
            type: Number,
            default: null
        },
        clearable: {
            type: Boolean,
            default: true
        },
        placeholder: String
    },
    data() {
        return {
            dataCache: {
                ratio: null,
            },
        }
    },
    watch: {
        // 外部改变数据
        ratio: {
            immediate: true,
            handler: function (n, o) {
                if (n != o) {
                    this.dataCache.ratio = n;
                }
            }
        }
    },
    methods: {
        // 点击选中数据
        filterChange(ratio) {
            // 对外广播事件
            this.$emit('change', typeof ratio === 'number' ? ratio : null);
        },
        // 权限验证 (禁用【大放】【小放】)
        isDisabled(ratio) {
            if ([2, 3].indexOf(ratio) >= 0) {
                return !this.$store.getters['admin/menu/hasPermissionTo']('game.user.ratio');
            }
            return false;
        }
    },
}
</script>

<style scoped>

</style>
